<template>
  <div class="propsview">
    <h2>propsview</h2>
    <Info :orderInfo="orderInfo"></Info>
    <AddressInfo v-model:address="orderInfo.address"></AddressInfo>
    <Items :itemList="orderInfo.itemList" @subCount="subCount" @addCount="addCount"></Items>
  </div>

</template>

<script setup>
import { reactive } from 'vue'
import Info from '../components/propsComponent/Info.vue'
import AddressInfo from '../components/propsComponent/AddressInfo.vue'
import Items from '../components/propsComponent/Items.vue'

const orderInfo = reactive({
  address: '默认地址',
  itemList: [
    { name: '苹果', price: 20, count: 0 },
    { name: '香蕉', price: 12, count: 0 },
    { name: '梨子', price: 15, count: 0 },
  ]
})

const subCount = (index) => {
  if (orderInfo.itemList[index].count <= 0) {
    alert("数量不能低于0")
  } else {
    orderInfo.itemList[index].count--
  }

}
const addCount = (index) => {
  orderInfo.itemList[index].count++
}
</script>

<style scoped>
.propsview {
  width: 400px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  background-color: #f9f9f9;
}
</style>
